<template>
  <h3>轮播图列表</h3>
  <el-table :data="bannerList" height="500" style="width: 100%" empty-text="暂无数据！！！">
    <el-table-column prop="bannerid" label="编号" width="180" />
    <el-table-column label="图片" width="180">
      <template #default="scope">
        <img class="pic" :src="scope.row.img" />
      </template>
    </el-table-column>
    <el-table-column prop="alt" label="图片提示" width="180" />
    <el-table-column prop="link" label="图片连接" width="180" />
    <el-table-column label="是否启用" width="180">
      <template #default="scope">
        <el-switch v-model="scope.row.flag" @change="(val: any) => updated(scope.row.bannerid, val)" />
      </template>
    </el-table-column>
    <!-- <el-table-column label="是否删除" width="180">
      <template #default="scope">
        <el-button type="danger" :icon="Delete" circle v-model="scope.row.bannerid" @click="del(scope.row.bannerid)" />
      </template>
    </el-table-column> -->
    <el-table-column label="是否删除" width="180">
      <template #default="scope">
        <el-popconfirm title="您真的想好要舍弃我了吗？" @confirm="del(scope.row.bannerid)">
          <template #reference>
            <el-button type="danger" :icon="Delete" circle/>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-row class="mb-4">
  <template #default="scope">
        <el-popconfirm title="您真的想好要舍弃我了吗？" @confirm="delall">
          <template #reference>
            <el-button type="danger" plain class="button01" v-show="bannerList.length != 0">全部清空</el-button>
          </template>
        </el-popconfirm>
  </template>
</el-row>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';
import { reactive } from "vue";
import service from "../../../utils/service";
// import { useRouter } from "vue-router"
import {
  Delete,
} from '@element-plus/icons-vue'
// const router = useRouter()
interface IBanner {
  link: string,
  img: string,
  alt: string,
  bannerid: string,
  flag: boolean
}
let bannerList = reactive<IBanner[]>([]);
const getBannerList = () => {
  service({
    url: "/banner/list"
  }).then((res) => {
    if (res.data.code == 200) {
      bannerList.length = 0;
      bannerList.push(...res.data.data);
    }
  })
}
getBannerList();
const updated = (bannerid: string, val: string) => {
  service({
    url: "/banner/updateFlag",
    method: "post",
    data: {
      bannerid: bannerid,
      flag: val
    }
  }).then((res) => {
    // if (res.data.code == 200) {
    //   alert("已更新")

    // }
  }
  )
}
const del = (bannerid: string) => {
  service({
    url: "/banner/delete",
    method: "get",
    params: {
      bannerid: bannerid,
    }
  }).then((res) => {
    if (res.data.code == 200) {
      ElMessage({
          message: '删除成功！',
          type: 'success',
        })
        getBannerList();
        // router.go(0);
    }
  }
  )
}
const delall=()=>{
  service({
    url:"/banner/removeAll",
  }).then((res)=>{
    if (res.data.code == 200) {
      ElMessage({
          message: '全部清空！',
          type: 'success',
        })
        getBannerList();
      }
    }
  )
}
</script>
<style scoped>
.pic {
  width: 50%;
  height: 50%;
}
.button01{
  margin: 0 auto;
}
</style>